/*
 * @描述: 菜单管理页面逻辑
 * @版权所有: 广东国星科技有限公司
 * @商业授权: www.mscodecloud.com
 */
import React, { PureComponent, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { connect } from 'dva';
import moment from 'moment';
import { Row, Col, Card, Form, Input, Select, TreeSelect, Icon, Button, InputNumber, Modal, message, Divider, Radio, Popconfirm, Tooltip, Checkbox } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { saveAs } from 'file-saver';
import ProTable from '@ant-design/pro-table';

import styles from './Admin.less';

const FormItem = Form.Item;
const { Option } = Select;
const RadioGroup = Radio.Group;
const InputGroup = Input.Group;
const InputPassword = Input.Password;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

const CreateForm = Form.create()(props => {
  const { modalVisible, form, handleAdd, handleModalVisible, parentMenuData, menuButtonData } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  const onChange = value => {
    form.setFieldsValue({
      'parentId': value
    })
  };

  return (
    <Modal
      destroyOnClose
      width={720}
      title={formatMessage({ id: 'app.sysmenu.add-menu' })}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <Row gutter={16}>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-code' })}>
            {form.getFieldDecorator('menuCode', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'validation.menu-code.required' })
                },
                {
                  message: formatMessage({ id: 'validation.menu-code.length' }),
                  max: 32
                }
              ]
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-name' })}>
            {form.getFieldDecorator('menuName', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'validation.menu-name.required' })
                },
                {
                  message: formatMessage({ id: 'validation.menu-name.length' }),
                  max: 32
                }
              ]
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-icon' })}>
            {form.getFieldDecorator('menuIcon', {
              rules: [
                {
                  message: formatMessage({ id: 'validation.menu-icon.length' }),
                  max: 32
                }
              ]
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-path' })}>
            {form.getFieldDecorator('menuPath', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'validation.menu-path.required' })
                },
                {
                  message: formatMessage({ id: 'validation.menu-path.length' }),
                  max: 512
                }
              ]
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-component' })}>
            {form.getFieldDecorator('menuComponent', {
              rules: [
                {
                  message: formatMessage({ id: 'validation.menu-component.length' }),
                  max: 256
                }
              ]
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-sequence' })}>
            {form.getFieldDecorator('menuSequence', {

            })(<InputNumber style={{ width: '100%' }} min={1} />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }}
            label={
              <span>
                <FormattedMessage id="app.sysmenu.menu-parent" />
                <Tooltip title={<FormattedMessage id="app.common.choose-tooltip" />}>
                  <Icon type="info-circle-o" />
                </Tooltip>
              </span>
            }>
            {form.getFieldDecorator('parentId', {

            })(<TreeSelect
              showSearch
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={parentMenuData}
              placeholder={formatMessage({ id: 'app.common.choose' })}
              treeDefaultExpandAll
              onChange={onChange}
              treeNodeFilterProp="title"
            />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label={formatMessage({ id: 'app.sysmenu.menu-status' })}>
            {form.getFieldDecorator('menuStatus', {
              rules: [
                {
                  required: true
                }
              ],
              initialValue: '1'
            })(
              <RadioGroup>
                <Radio value="1">{formatMessage({ id: 'app.sysmenu.show-status' })}</Radio>
                <Radio value="0">{formatMessage({ id: 'app.sysmenu.hide-status' })}</Radio>
              </RadioGroup>
            )}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <FormItem labelCol={{ span: 3 }} label={formatMessage({ id: 'app.sysmenu.menu-button' })}>
            {form.getFieldDecorator('menuButton', {

            })(
              <Checkbox.Group
                style={{ width: '100%', paddingLeft: '30px' }}
                options={menuButtonData} />
            )}
          </FormItem>
        </Col>
      </Row>
    </Modal>
  );
});

@Form.create()
class UpdateForm extends PureComponent {
  static defaultProps = {
    handleUpdate: () => { },
    handleUpdateModalVisible: () => { },
    values: {}
  };

  constructor(props) {
    super(props);

    this.state = {
      formVals: {
        menuCode: props.values.menuCode,
        menuName: props.values.menuName,
        menuIcon: props.values.menuIcon,
        menuPath: props.values.menuPath,
        menuComponent: props.values.menuComponent,
        menuSequence: props.values.menuSequence,
        menuStatus: props.values.menuStatus,
        parentId: props.values.parentId == 0 ? null : props.values.parentId,
        id: props.values.id
      },
      checkedKeys: props.checkedKeys
    };

    this.formLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 17 }
    };
  }

  renderContent = (formVals) => {
    const { form, parentMenuData, menuButtonData /** , checkedKeys **/ } = this.props;
    const onChange = value => {
      form.setFieldsValue({
        'parentId': value
      })
    };

    return [
      <Row key="menuCodeRow" gutter={16}>
        <Col key="menuCodeCol" span={12}>
          <FormItem key="menuCode" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-code' })}>
            {form.getFieldDecorator('menuCode', {
              rules: [
                {
                  required: true
                }
              ],
              initialValue: formVals.menuCode
            })(<Input disabled placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
        <Col key="menuNameCol" span={12}>
          <FormItem key="menuName" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-name' })}>
            {form.getFieldDecorator('menuName', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'validation.menu-name.required' })
                },
                {
                  message: formatMessage({ id: 'validation.menu-name.length' }),
                  max: 32
                }
              ],
              initialValue: formVals.menuName
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
      </Row>,
      <Row key="menuIconRow" gutter={16}>
        <Col key="menuIconCol" span={12}>
          <FormItem key="menuIcon" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-icon' })}>
            {form.getFieldDecorator('menuIcon', {
              rules: [
                {
                  message: formatMessage({ id: 'validation.menu-icon.length' }),
                  max: 32
                }
              ],
              initialValue: formVals.menuIcon
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
        <Col key="menuPathCol" span={12}>
          <FormItem key="menuPath" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-path' })}>
            {form.getFieldDecorator('menuPath', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'validation.menu-path.required' })
                },
                {
                  message: formatMessage({ id: 'validation.menu-path.length' }),
                  max: 512
                }
              ],
              initialValue: formVals.menuPath
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
      </Row>,
      <Row key="menuComponentRow" gutter={16}>
        <Col key="menuComponentCol" span={12}>
          <FormItem key="menuComponent" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-component' })}>
            {form.getFieldDecorator('menuComponent', {
              rules: [
                {
                  message: formatMessage({ id: 'validation.menu-component.length' }),
                  max: 256
                }
              ],
              initialValue: formVals.menuComponent
            })(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
          </FormItem>
        </Col>
        <Col key="menuSequenceCol" span={12}>
          <FormItem key="menuSequence" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-sequence' })}>
            {form.getFieldDecorator('menuSequence', {
              initialValue: formVals.menuSequence
            })(<InputNumber style={{ width: '100%' }} min={1} />)}
          </FormItem>
        </Col>
      </Row>,
      <Row key="parentIdRow" gutter={16}>
        <Col key="parentIdCol" span={12}>
          <FormItem key="parentId" {...this.formLayout}
            label={
              <span>
                <FormattedMessage id="app.sysmenu.menu-parent" />
                <Tooltip title={<FormattedMessage id="app.common.choose-tooltip" />}>
                  <Icon type="info-circle-o" />
                </Tooltip>
              </span>
            }>
            {form.getFieldDecorator('parentId', {
              initialValue: formVals.parentId
            })(<TreeSelect
              showSearch
              allowClear
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={parentMenuData}
              placeholder={formatMessage({ id: 'app.common.choose' })}
              treeDefaultExpandAll
              onChange={onChange}
              treeNodeFilterProp="title"
            />)}
          </FormItem>
        </Col>
        <Col key="menuStatusCol" span={12}>
          <FormItem key="menuStatus" {...this.formLayout} label={formatMessage({ id: 'app.sysmenu.menu-status' })}>
            {form.getFieldDecorator('menuStatus', {
              rules: [
                {
                  required: true
                }
              ],
              initialValue: formVals.menuStatus
            })(
              <RadioGroup>
                <Radio value={1}>{formatMessage({ id: 'app.sysmenu.show-status' })}</Radio>
                <Radio value={0}>{formatMessage({ id: 'app.sysmenu.hide-status' })}</Radio>
              </RadioGroup>
            )}
          </FormItem>
        </Col>
      </Row>,
      <Row key="menuButtonRow" gutter={16}>
        <Col key="menuButtonCol" span={24}>
          <FormItem key="menuButton" labelCol={{ span: 3 }} label={formatMessage({ id: 'app.sysmenu.menu-button' })}>
            {form.getFieldDecorator('menuButton', {
              initialValue: this.state.checkedKeys
            })(
              <Checkbox.Group
                style={{ width: '100%', paddingLeft: '30px' }}
                options={menuButtonData}
              />
            )}
          </FormItem>
        </Col>
      </Row>
    ];
  };

  render() {
    const { updateModalVisible, handleUpdateModalVisible, values } = this.props;
    const { formVals } = this.state;
    const okUpdateHandle = () => {
      const { form, handleUpdate } = this.props;
      const { formVals: oldValue } = this.state;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...oldValue, ...fieldsValue };
        this.setState(
          {
            formVals
          },
          () => {
            handleUpdate(formVals);
          }
        );
      });
    };

    return (
      <Modal
        destroyOnClose
        width={720}
        title={formatMessage({ id: 'app.sysmenu.edit-menu' })}
        visible={updateModalVisible}
        onOk={okUpdateHandle}
        onCancel={() => handleUpdateModalVisible(false, values)}
        afterClose={() => handleUpdateModalVisible()}
      >
        {this.renderContent(formVals)}
      </Modal>
    );
  }
}

/* eslint react/no-multi-comp:0 */
@connect(({ sysMenu, loading }) => ({
  sysMenu,
  loading: loading.models.sysMenu,
}))
@Form.create()
class SysMenu extends PureComponent {
  state = {
    modalVisible: false,
    updateModalVisible: false,
    selectedRows: [],
    formValues: {},
    updateFormValues: {},
    parentMenuData: {},
    menuButtonData: {},
    checkedKeys: [],
    hiddenMenuButton: localStorage.getItem('mscode_menubutton')
  };

  columns = [
    {
      title: formatMessage({ id: 'app.sysmenu.menu-name' }),
      dataIndex: 'menuName'
    },
    {
      title: formatMessage({ id: 'app.sysmenu.menu-code' }),
      dataIndex: 'menuCode'
    },
    {
      title: formatMessage({ id: 'app.sysmenu.menu-icon' }),
      dataIndex: 'menuIcon'
    },
    {
      title: formatMessage({ id: 'app.sysmenu.menu-path' }),
      copyable: true,
      ellipsis: true,
      dataIndex: 'menuPath'
    },
    {
      title: formatMessage({ id: 'app.sysmenu.menu-status' }),
      dataIndex: 'menuStatusCn'
    },
    {
      title: formatMessage({ id: 'app.sysmenu.menu-sequence' }),
      dataIndex: 'menuSequence'
    },
    {
      title: formatMessage({ id: 'app.common.operate' }),
      align: 'center',
      render: (text, record) => (
        <Fragment>
          {this.state.hiddenMenuButton.indexOf('sysmenu:update') !== -1 ? null :
            <a onClick={() => this.handleUpdateModalVisible(true, record)}><Icon type="edit" />{formatMessage({ id: 'app.common.edit' })}</a>
          }
          <Divider type="vertical" />
          <Popconfirm title={formatMessage({ id: 'app.common.confirm-delete' })} onConfirm={() => this.deleteItem(record.id)}>
            {this.state.hiddenMenuButton.indexOf('sysmenu:delete') !== -1 ? null :
              <a><Icon type="delete" />{formatMessage({ id: 'app.common.delete' })}</a>
            }
          </Popconfirm>
        </Fragment>
      )
    }
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysMenu/fetch'
    });
    dispatch({
      type: 'sysMenu/fetchCheckbox'
    });
  }

  handleBasicTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'sysMenu/fetch',
      payload: params
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {}
    });
    dispatch({
      type: 'sysMenu/fetch',
      payload: {}
    });
  };

  deleteItem = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysMenu/delete',
      payload: {
        id: id
      }
    }).then(response => {
      if (response.message == 'success') {
        this.setState({
          selectedRows: []
        });
        message.success(formatMessage({ id: 'app.common.delete-success' }));
      } else {
        message.warning(response.message);
      }
      dispatch({
        type: 'sysMenu/fetch',
        payload: {}
      });
    });
  }

  handleDeleteClick = () => {
    const { selectedRows } = this.state;

    if (selectedRows.length === 0) {
      message.warning(formatMessage({ id: 'app.common.choose-delete' }));
      return;
    }

    Modal.confirm({
      title: formatMessage({ id: 'app.common.batch-delete' }),
      content: formatMessage({ id: 'app.common.confirm-batch-delete' }),
      okText: formatMessage({ id: 'app.common.confirm' }),
      cancelText: formatMessage({ id: 'app.common.cancel' }),
      onOk: () => this.deleteItem(selectedRows.map(row => row.id)),
    });
  };

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows
    });
  };

  handleSearch = e => {
    if (e) {
      e.preventDefault();
    }
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue
      };
      this.setState({
        formValues: values
      });
      dispatch({
        type: 'sysMenu/fetch',
        payload: values
      });
    });
  };

  handleExport = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue
      };
      this.setState({
        formValues: values
      });
      dispatch({
        type: 'sysMenu/export',
        payload: values
      }).then(response => {
        saveAs(response, formatMessage({ id: 'app.sysmenu.menu-manage' }) + '.xlsx');
        dispatch({
          type: 'sysMenu/fetch',
          payload: values
        });
      });
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag
    });
    if (flag == true) {
      const { dispatch } = this.props;
      dispatch({
        type: 'sysMenu/fetchTree'
      });
    }
  };

  handleUpdateModalVisible = (flag, record) => {
    if (flag == true) {
      const { dispatch } = this.props;
      dispatch({
        type: 'sysMenu/fetchTree'
      });
      dispatch({
        type: 'sysMenu/fetchCheckedMenuButton',
        payload: {
          menuCode: record.menuCode
        }
      }).then(response => {
        this.setState({
          updateModalVisible: !!flag,
          updateFormValues: record || {}
        });
      });
    } else {
      this.setState({
        updateModalVisible: !!flag
      });
    }
  };

  handleAdd = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysMenu/add',
      payload: {
        menuCode: fields.menuCode,
        menuName: fields.menuName,
        menuIcon: fields.menuIcon,
        menuPath: fields.menuPath,
        menuComponent: fields.menuComponent,
        menuSequence: fields.menuSequence,
        menuStatus: fields.menuStatus,
        menuButton: fields.menuButton,
        parentId: fields.parentId ? fields.parentId : 0
      }
    }).then(response => {
      if (response.message == 'success') {
        message.success(formatMessage({ id: 'app.common.add-success' }));
        this.handleModalVisible();
      } else {
        message.warning(response.message);
      }
      dispatch({
        type: 'sysMenu/fetch',
        payload: {}
      });
    });
  };

  handleUpdate = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'dataPermission/update',
      payload: {
        body: {
          menuCode: fields.menuCode,
          menuName: fields.menuName,
          menuIcon: fields.menuIcon,
          menuPath: fields.menuPath,
          menuComponent: fields.menuComponent,
          menuSequence: fields.menuSequence,
          menuStatus: fields.menuStatus,
          menuButton: fields.menuButton,
          parentId: fields.parentId ? fields.parentId : 0,
          id: fields.id
        },
      },
    }).then(response => {
      if (response.message == 'success') {
        message.success(formatMessage({ id: 'app.common.edit-success' }));
        this.handleUpdateModalVisible();
      } else {
        message.warning(response.message);
      }
      dispatch({
        type: 'sysMenu/fetch',
        payload: {}
      });
    });
  };

  renderSimpleForm() {
    const { form: { getFieldDecorator } } = this.props;

    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label={formatMessage({ id: 'app.sysmenu.menu-name' })}>
              {getFieldDecorator('menuName')(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label={formatMessage({ id: 'app.sysmenu.menu-path' })}>
              {getFieldDecorator('menuPath')(<Input placeholder={formatMessage({ id: 'app.common.enter' })} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" icon="search">
                {formatMessage({ id: 'app.common.query' })}
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset} type="primary" icon="reload">
                {formatMessage({ id: 'app.common.reset' })}
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    return this.renderSimpleForm();
  }

  render() {
    const { sysMenu: { data, treeData, checkboxData, checkedMenuButton }, loading } = this.props;
    const { /**selectedRows,**/ modalVisible, updateModalVisible, updateFormValues } = this.state;
    let parentMenuData;
    if ({ treeData }.treeData) {
      parentMenuData = { treeData }.treeData;
    }
    let menuButtonData;
    if ({ checkboxData }.checkboxData) {
      menuButtonData = { checkboxData }.checkboxData;
    }
    let checkedKeys;
    if ({ checkedMenuButton }.checkedMenuButton) {
      checkedKeys = { checkedMenuButton }.checkedMenuButton;
    }
    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible
    };
    const updateMethods = {
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleUpdate: this.handleUpdate
    };
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.handleSelectRows(selectedRows);
      }
    };
    return (
      <PageHeaderWrapper content={formatMessage({ id: 'app.sysmenu.menu-manage' })}>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderForm()}</div>
            <div className={styles.tableListOperator}>
              {this.state.hiddenMenuButton.indexOf('sysmenu:add') !== -1 ? null :
                <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                  {formatMessage({ id: 'app.common.add' })}
                </Button>
              }
              {this.state.hiddenMenuButton.indexOf('sysmenu:export') !== -1 ? null :
                <Button icon="file-excel" type="primary" onClick={this.handleExport}>
                  {formatMessage({ id: 'app.common.export' })}
                </Button>
              }
              {this.state.hiddenMenuButton.indexOf('sysmenu:delete') !== -1 ? null :
                <Button icon="delete" type="danger" ghost onClick={this.handleDeleteClick}>
                  {formatMessage({ id: 'app.common.batch-delete' })}
                </Button>
              }
            </div>
            <ProTable
              bordered={true}
              search={false}
              rowKey={record => record.id}
              rowSelection={rowSelection}
              loading={loading}
              dataSource={data ? data.list : []}
              pagination={data ? data.pagination : {}}
              columns={this.columns}
              onChange={this.handleBasicTableChange}
              options={{
                density: true,
                reload: () => {
                  this.handleSearch();
                },
                fullScreen: true,
                setting: true,
              }}
            />
          </div>
        </Card>
        <CreateForm
          {...parentMethods}
          modalVisible={modalVisible}
          parentMenuData={parentMenuData}
          menuButtonData={menuButtonData}
        />
        {updateFormValues && Object.keys(updateFormValues).length ? (
          <UpdateForm
            key={Math.random()}
            {...updateMethods}
            updateModalVisible={updateModalVisible}
            values={updateFormValues}
            parentMenuData={parentMenuData}
            menuButtonData={menuButtonData}
            checkedKeys={checkedKeys}
          />
        ) : null}
      </PageHeaderWrapper>
    );
  }
}

export default SysMenu;
